<template>

    <div style="background-color: white">
        <!--v-if="list.length>0"-->
        <div v-if="list.length>0">
            <yd-infinitescroll :callback="loadList" ref="infinitescrollDemo">
                <yd-list theme="4" slot="list">
                    <div class="mui-flex" v-for="(item,index) in list" style="  height: 80px;
            border-bottom: 1px solid #e1e1e1;">
                        <div class="cell3">
                            <p class="context" >【{{item.type_name}}】 {{item.content}}</p>
                        </div>
                        <div class="cell">
                            <p class="name" >{{item.name}}</p>
                            <p class="time" >{{item.created.substring(0,16)}}</p>
                        </div>
                    </div>
                </yd-list>
            </yd-infinitescroll>
        </div>
        <div v-else>
            <img src="../../assets/nolist.png" class="nolist-image" alt="">
            <p  class="nolist-tite">暂无维护记录</p>
        </div>


    </div>

</template>

<script>
    import {machineRepairList} from "../../pcof/post";
    import {userInfoData} from '../../globalVariables'

    export default {
        name: "equipmentRecord",
        data() {
            return {
                machineUuid:'',
                pageNumber: 1,
                pageSize: 20,
                serviceTotalPage: 1,
                list: [],
            }

        },
        methods:{

            async loadList() {
                // mobile,machineUuid,pageNumber, pageSize,

                var mobile = JSON.parse(localStorage.getItem(userInfoData)).mobile;
                var  response =await machineRepairList(mobile,this.machineUuid,this.pageNumber,this.pageSize);
                if (response.data.code === 200) {
                    const _list = response.data.data.list;
                    this.list = [...this.list, ..._list];
                    if (_list.length < this.pageSize || this.pageNumber === this.serviceTotalPage) {

                        /* 所有数据加载完毕 */
                        this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
                        return;
                    }

                    /* 单次请求数据完毕 */
                    this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');

                    this.pageNumber++;

                } else {

                }
            },
        },
        async created(){
            // mobile,machineUuid,pageNumber, pageSize,

            this.machineUuid = this.$route.params.equipmentuuid;
            this.pageNumber=1;
            this.pageSize=20;
            var mobile = JSON.parse(localStorage.getItem(userInfoData)).mobile;
            var  response =await machineRepairList(mobile,this.machineUuid,this.pageNumber,this.pageSize);
            this.$dialog.loading.open('加载中...');

            if (response.data.code === 200) {
                this.$dialog.loading.close();
                this.list=response.data.data.list;

                this.serviceTotalPage = response.data.data.totalPage;
                if (this.serviceTotalPage > 1) {
                    this.pageNumber++;
                } else {
                    /* 所有数据加载完毕 */
                    this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
                }
            }else
            {
                this.$dialog.loading.close();
                console.log(response.data.msg);
                this.$dialog.toast({
                    mes: response.data.msg,
                    timeout: 1500
                });
            }

        },
    }
</script>

<style scoped>
    .context {
        color: #b1b1b1;
        font-size: 0.25rem;
        text-align: left;
        padding-left: 20px;
        padding-top: 20px;
        padding-bottom: 10px;
        width: 100%;
    }
    .name {
        color: #464646;
        font-size: 0.2rem;
        text-align: right;
        padding-top: 20px;
        padding-right: 20px;
        width: 100%;
    }
    .time
    {
        color: #b1b1b1;
        padding-top: 10px;
        padding-right: 20px;
        width: 100%;
        text-align: right;
    }

</style>